<template>
  <div>
    <el-form
      ref="formItem"
      :rules="formItemRule"
      :model="formItem"
      
      @submit.native.prevent
      label-width="100px"
    >
      <el-form-item label="名称" prop="title">
        <el-input v-model="formItem.title" placeholder="请输入分类名称"></el-input>
      </el-form-item>
      <el-form-item label="图标：" prop="thumb">
        <div class="picBox" @click="modalPicTap(false,'thumb')">
          <div class="pictrue" v-if="formItem.thumb">
            <img v-lazy="formItem.thumb" />
          </div>
          <div class="upLoad acea-row row-center-wrapper" v-else>
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
        <div style="color: #808080">推荐上传尺寸 72*72</div>
      </el-form-item>
      <el-form-item label="banner图：" prop="banner" v-if="pid == 0">
        <div class="picBox" @click="modalPicTap(false,'banner')">
          <div class="pictrue" v-if="formItem.banner">
            <img v-lazy="formItem.banner" />
          </div>
          <div class="upLoad acea-row row-center-wrapper" v-else>
            <i class="el-icon-camera cameraIconfont" />
          </div>
        </div>
        <div style="color: #808080">推荐上传尺寸 520*140</div>
      </el-form-item>
      <el-form-item label="是否推荐">
        <el-radio-group v-model="formItem.isRecommend">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="绑定地址">
        <el-input v-model="formItem.linkUrl" placeholder="请输入绑定小程序页面地址"></el-input>
      </el-form-item>
      <el-form-item label="排序" prop="title">
        <el-input-number :min="0" v-model="formItem.sort"></el-input-number>
      </el-form-item>
      <el-form-item label="状态">
        <el-radio-group v-model="formItem.status">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button @click="cancel">取消</el-button>
        <el-button @click="submit" type="primary">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { cateInfoApi, cateInfoSaveApi } from '@/api/onsite';
export default {
  props: {
    id: 0,
    pid: 0,
  },
  data() {
    return {
      formItem: {
        title: '',
        thumb: '',
        isRecommend: 0,
        sort: 0,
        status: 0,
        banner: '',
        linkUrl: '',
        pid: 0,
      },
      formItemRule: {
        title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    if (this.id) {
      this.getInfo();
    }
  },
  methods: {
    getInfo() {
      cateInfoApi({ id: this.id }).then((res) => {
        let data = res;
        Object.entries(this.formItem).forEach(([index, item]) => {
          this.formItem[index] = data[index];
        });
      });
    },
    cancel(){
        this.$emit('close');
    },
    submit() {
      this.$refs.formItem.validate((valid) => {
        if (valid) {
          let form = this.formItem;
          form.id = this.id;
          if (!form.pid) {
            form.pid = this.pid;
          }
          cateInfoSaveApi(form).then(res => {
            this.$message.success('操作成功');
            this.$emit('submitSuccess')
          }).catch(err => {
            this.$message.error('操作失败');
          })
        }
      });
    },
    modalPicTap(multiple, index) {
      const _this = this;
      this.$modalUpload(
        function (img) {
          if (!img) return;
          _this.formItem[index] = img[0].sattDir;
        },
        multiple,
        'store',
      );
    },
  },
};
</script>

<style lang="stylus" scoped>
.picBox {
  display: inline-block;
  cursor: pointer;

  .upLoad {
    width: 58px;
    height: 58px;
    line-height: 58px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.02);
  }

  .pictrue {
    width: 60px;
    height: 60px;
    border: 1px dotted rgba(0, 0, 0, 0.1);
    margin-right: 10px;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .iconfont {
    color: #898989;
  }
}

.pictrue {
  width: 60px;
  height: 60px;
  border: 1px dotted rgba(0, 0, 0, 0.1);
  margin-right: 10px;

  img {
    width: 100%;
    height: 100%;
  }
}

.footer {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: end;

  .btn-save {
    margin-left: 10px;
  }
}
</style>